<template>
  <view>
    <view class="contain">
      <view class="row">
        <view class="name">意见与反馈</view>
      </view>

      <view class="row text">
        <view>
          <textarea
            v-model="opinion"
            maxlength="200"
            placeholder="点击这里输入您的建议~"
            class="input"
          ></textarea>
          <view class="word-count">{{ wordCount }}/200</view>
        </view>
      </view>
      <view class="row">
        <view>
          <view>相关截截图(选填)</view>
          <view class="img-count">{{ imgCount }}/2</view>
        </view>
        <view v-for="(item, index) in src" :key="index">
          <image :src="item" alt="" class="img" />
        </view>
        <view v-if="imgCount < 2" @click="uploadPicture">
          <image
            class="add-img"
            src="@/static/addimage.png"
            alt=""
          />
        </view>
      </view>
      <view class="row">
        <view class="name">微信号（选填）</view>
        <input
          v-model="wechat"
          maxlength="20"
          placeholder="如果想要详细交流，点击这里留下微信号哦~"
          class="wechat-input"
        />
      </view>
    </view>
    <button @click="submit">提交</button>
  </view>
</template>

<script>
import {post, showModel} from '@/config/request.js'
export default {
  data () {
    return {
      wordCount: 0,
      opinion: '',
      src: [],
      imgCount: 0,
      wechat: ''
    }
  },
  methods: {
    uploadPicture () {
      let that = this
      wx.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success (res) {
          // tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths
          that.src.push(tempFilePaths)
          console.log('图片路径', that.src)
        }
      })
    },
    async submit () {
      if (this.wordCount > 0) {
        const data = {
          opinion: this.opinion,
          src: this.src.join(','),
          wechat: this.wechat,
          openid: wx.getStorageSync('userInfo').openId
        }
        try {
          const res = await post('createopinion', data)
          console.log('后端返回', res)
          showModel('提交成功', '已经将您的反馈提交给了开发者')
        } catch (err) {
          console.log('从后端返回执行的错误信息是：', err)
          showModel('提交失败', '服务器出了一点问题，请稍后再试~')
        }
      } else {
        showModel('提交失败', '反馈内容不能为空哦~')
      }
    }
  },
  watch: {
    opinion () {
      this.wordCount = this.opinion.length
    },
    src () {
      this.imgCount = this.src.length
    }
  }
}
</script>

<style lang="less" scoped>
.contain {
  background: #ffffff;
  font-size: 15px;
  .text {
    height: 110px;
  }
  .row {
    border-bottom: 1px #e8e8e8 solid;
    padding: 5px 15px;
    .name {
      width: 80%;
      height: 40px;
      line-height: 40px;
    }
    .input {
      width: 100%;
      height: 85px;
      font-size: 14px;
      padding-top: 5px;
    }
    .word-count {
      float: right;
      color: #808080;
    }
    .img-count {
      float: right;
      line-height: 40px;
      color: #808080;
    }
    .add-img {
      width: 80px;
      height: 80px;
    }
    .img {
      width: 66px;
      height: 66px;
      margin-bottom: 7px;
      margin-right: 10px;
    }
    .wechat-input {
      font-size: 14px;
    }
  }
}
button {
  margin: 20px auto;
  width: 90%;
  border-radius: 5px;
  background: #ea5149;
  font-size: 16px;
  color: #ffffff;
  font-weight: bold;
}
</style>